<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>7. v-model</h2>
			<p>数据双向绑定 (只能对表单元素有效)</p>
			<div>{{msg}}</div>
			<input type="text" v-bind:value="msg" />
			<input type="text" v-model="msg" />
			<input type="text" v-model="msg" />
			<p>.trim 过滤掉首位空格</p>
			<input type="text" v-model.trim="msg" />
			<p>.lazy 失去焦点时更新模型数据</p>
			<p>类似于 onblur事件</p>
			<input type="text" v-model.lazy="msg" />
			
			<div >选中:{{like}}</div>
			
			<select v-model="like">
				<option value="1">香蕉</option>
				<option value="2">西瓜</option>
				<option value="3">葡萄</option>
			</select>
			
			性别:{{gender}}<br />
			<input type="radio" value="男" v-model="gender" name="gender"/>男
			<input type="radio" value="女" v-model="gender" name="gender"/>女
			<br />
			爱好:{{likes}}<br />
			<input type="checkbox" value="香蕉" v-model="likes" name="likes"/>香蕉
			<input type="checkbox" value="西瓜" v-model="likes" name="likes"/>西瓜
			<input type="checkbox" value="葡萄" v-model="likes" name="likes"/>葡萄
		</div>

		<script>
			const vm = Vue.createApp({
				data() {
					return {
						msg: "Hello Vue!",
						name: "张三",
						like: "1",
						gender: "男",
						likes: []
					}
				}
			})
			vm.mount("#app");
		</script>
	</body>
</html>
